<template>
  <!-- 右侧筛选 -->
  <div class="screenGroup" id="screenGroup">
    <div class="screenBar">
      <Row style="height: 45px;width: 100%;line-height: 45px;">
        <i-col span="10" class="screenBarItem" @click.native="modelShowAction('screenGroupStation')">
          {{dispatchSearchForm.free===''?'全疆货运中心':dispatchSearchForm.free}}&nbsp;&nbsp;
          <Icon type="arrow-down-b"></Icon>
        </i-col>
        <i-col span="5" class="screenBarItem" @click.native="modelShowAction('screenGroupProduct')">
          {{dispatchSearchForm.typeId===''?'品类':categoryList[+dispatchSearchForm.typeId-1].name}}&nbsp;&nbsp;
          <Icon type="arrow-down-b"></Icon>
        </i-col>
        <i-col span="5" class="screenBarItem" @click.native="modelShowAction('screenGroupvolume')">
          {{dispatchSearchForm.stationRank===''?'运量':stationRankRoul[+dispatchSearchForm.stationRank-1].name}}&nbsp;&nbsp;
          <Icon type="arrow-down-b"></Icon>
        </i-col>
        <i-col span="4" class="screenBarItem" @click.native="modelShowAction('screenGroupOther')">
          <Icon type="android-more-vertical" size="24" style="margin-top:11px;"></Icon>
        </i-col>
      </Row>
    </div>
    <div class="screenSelectInfoStation" v-if="modelShow.screenGroupStation">
      <div class="screenSelectInfoStationIcon">
        <Icon type="arrow-up-b" size="20" color="#173A58"></Icon>
      </div>
      <Row class="infoDetailRow">
        <i-col @click.native="dispatchSearchForm.free='',modelShow.screenGroupStation=false">
          <!--<Icon type="record" :style="stationColorAllContent['全疆电子票据总量']"></Icon>-->
          全疆货运中心
        </i-col>
      </Row>
      <template v-for="(item,i) in freightCenterList">
        <Row @click.native="dispatchSearchForm.free=item.free,modelShow.screenGroupStation=false" :class="(i+1)%2===0?'infoDetailRow':'infoDetailRowBackfround'">
          <i-col>
            <!--<Icon type="record" :style="stationColorAllContent[item.free]" size="1"></Icon>&nbsp;-->{{item.free}}
          </i-col>
        </Row>
      </template>
    </div>
    <div class="screenSelectInfoProduct" v-if="modelShow.screenGroupProduct">
      <div class="screenSelectInfoStationIcon">
        <Icon type="arrow-up-b" size="20" color="#173A58"></Icon>
      </div>
      <Row class="infoDetailRow">
        <i-col @click.native="dispatchSearchForm.typeId='',modelShow.screenGroupProduct=false">全部品名</i-col>
      </Row>
      <template v-for="(item,i) in categoryList">
        <Row @click.native="dispatchSearchForm.typeId=item.id,modelShow.screenGroupProduct=false" :class="(i+1)%2===0?'infoDetailRow':'infoDetailRowBackfround'">
          <i-col>{{item.name}}</i-col>
        </Row>
      </template>
    </div>
    <div class="screenSelectInfoVolume" v-if="modelShow.screenGroupvolume">
      <div class="screenSelectInfoStationIcon">
        <Icon type="arrow-up-b" size="20" color="#173A58"></Icon>
      </div>
      <Row class="infoDetailRow" @click.native="dispatchSearchForm.stationRank='',modelShow.screenGroupvolume=false">
        <i-col>全部运量</i-col>
      </Row>
      <template v-for="(item,i) in stationRankRoul">
        <Row @click.native="dispatchSearchForm.stationRank=i+1,modelShow.screenGroupvolume=false" :class="(i+1)%2===0?'infoDetailRow':'infoDetailRowBackfround'">
          <i-col>{{item.qj}}</i-col>
        </Row>
      </template>
    </div>
    <div class="screenSelectInfo" v-if="modelShow.screenGroupOther">
      <div class="screenSelectInfoIcon">
        <Icon type="arrow-up-b" size="20" color="#173A58"></Icon>
      </div>
      <Row style="border-bottom:1px solid #225D92;padding: 5px 0;margin: 0 10px;">
        <i-col style="font-size: 20px;color: #44C0FF;">筛选</i-col>
      </Row>
      <Row style="padding: 5px 0;margin: 0 10px;margin-top: 5px;">
        <i-col style="cursor:pointer;" span="9" :class="dispatchSearchFormSX.keyPointZntx?'selectItem':'unselectItem'"
               @click.native="handleSelect('keyPointZntx')">
          有站内掏箱&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
        </i-col>
        <i-col style="cursor:pointer;" push="1" span="14" :class="dispatchSearchFormSX.keyPointZnxygl?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointZnxygl')">
          有站内箱源管理需求&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
        </i-col>
      </Row>
      <Row style="padding: 5px 0;margin: 0 10px;">
        <i-col style="cursor:pointer;" span="13" :class="dispatchSearchFormSX.keyPointFreightJqsd?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointFreightJqsd')">
          有接取送达业务&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
        </i-col>
        <i-col push="1" span="10" :class="dispatchSearchFormSX.keyPointFreightBiz?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointFreightBiz')">
          能办理货运业务&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
        </i-col>
      </Row>
      <Row style="padding: 5px 0;margin: 0 10px;">
        <i-col style="cursor:pointer;" span="13" :class="dispatchSearchFormSX.keyPointPfrotocolFleet?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointPfrotocolFleet')">
          有协议车队&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
        </i-col>
        <i-col style="cursor:pointer;" push="1" span="10" :class="dispatchSearchFormSX.keyPointKxhl?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointKxhl')">
          有空箱回流需求&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import {getFreightCenterList, getCategoryList} from '@api/lightStation/station'
  import _ from 'lodash'

  export default {
    name: 'screenGroup',
    data () {
      let freightCenterList = []
      let categoryList = []
      let dispatchSearchForm = {
        free: '',
        typeId: '',
        stationRank: ''
      }
      let dispatchSearchFormSX = {
        keyPointZntx: false,
        keyPointZnxygl: false,
        keyPointFreightJqsd: false,
        keyPointFreightBiz: false,
        keyPointPfrotocolFleet: false,
        keyPointKxhl: false
      }
      let stationRankRoul = [
        {name: '一级', qj: '100万吨以上', id: '1'},
        {name: '二级', qj: '51万吨～100万吨', id: '2'},
        {name: '三级', qj: '31万吨～50万吨', id: '3'},
        {name: '四级', qj: '11万吨～30万吨', id: '4'},
        {name: '五级', qj: '0～10万吨', id: '5'}
      ]
      let modelShow = {
        screenGroupStation: false,
        screenGroupProduct: false,
        screenGroupvolume: false,
        screenGroupOther: false
      }
      let datas = {freightCenterList, categoryList, stationRankRoul, dispatchSearchForm, dispatchSearchFormSX, modelShow}
      return datas
    },
    props: {},
    computed: {},
    methods: {
      handleSelect (who) {
        this.dispatchSearchFormSX[who] = !this.dispatchSearchFormSX[who]
      },
      modelShowAction (who) {
        let modelShow = {}
        if (who === 'screenGroupStation') {
          modelShow = {
            screenGroupStation: !this.modelShow.screenGroupStation,
            screenGroupProduct: false,
            screenGroupvolume: false,
            screenGroupOther: false
          }
        } else if (who === 'screenGroupProduct') {
          modelShow = {
            screenGroupStation: false,
            screenGroupProduct: !this.modelShow.screenGroupProduct,
            screenGroupvolume: false,
            screenGroupOther: false
          }
        } else if (who === 'screenGroupvolume') {
          modelShow = {
            screenGroupStation: false,
            screenGroupProduct: false,
            screenGroupvolume: !this.modelShow.screenGroupvolume,
            screenGroupOther: false
          }
        } else if (who === 'screenGroupOther') {
          modelShow = {
            screenGroupStation: false,
            screenGroupProduct: false,
            screenGroupvolume: false,
            screenGroupOther: !this.modelShow.screenGroupOther
          }
        }
        this.modelShow = Object.assign(this.modelShow, modelShow)
      },
      getSelectData () {
        getFreightCenterList().then(res => {
          if (res.data.isSuccess === 1) {
            _.forEach(res.data.data, (item, key) => {
              if (!item) {
                res.data.data.splice(key, 1)
              }
            })
            this.freightCenterList = res.data.data
          }
        })
        getCategoryList().then(res => {
          if (res.data.isSuccess === 1) {
            this.categoryList = res.data.data
          }
        })
      }
    },
    mounted () {
      this.getSelectData()
    },
    watch: {
      'dispatchSearchFormSX': {
        handler: function (oldVal, newVal) {
          let param = {
            keyPointZntx: +this.dispatchSearchFormSX.keyPointZntx,
            keyPointZnxygl: +this.dispatchSearchFormSX.keyPointZnxygl,
            keyPointFreightJqsd: +this.dispatchSearchFormSX.keyPointFreightJqsd,
            keyPointFreightBiz: +this.dispatchSearchFormSX.keyPointFreightBiz,
            keyPointPfrotocolFleet: +this.dispatchSearchFormSX.keyPointPfrotocolFleet,
            keyPointKxhl: +this.dispatchSearchFormSX.keyPointKxhl
          }
          if (param.keyPointZntx === 0 && param.keyPointZnxygl === 0 && param.keyPointFreightJqsd === 0 && param.keyPointFreightBiz === 0 && param.keyPointPfrotocolFleet === 0 && param.keyPointKxhl === 0) {
            this.$emit('selectStation', {})
          } else {
            this.$emit('selectStation', param)
          }
        },
        deep: true
      },
      'dispatchSearchForm': {
        handler: function (oldVal, newVal) {
          this.$emit('selectStation', this.dispatchSearchForm)
        },
        deep: true
      }
    },
    components: {}
  }
</script>

<style>
  /*筛选*/
  .screenGroup {
    position: absolute;
    right: 50px;
    top: 20px;
    z-index: 600;
    min-width: 355px;
    min-height: 45px;
  }

  .screenGroup .screenBar {
    width: 100%;
    height: 45px;
    background: #173A58;
    border: 1px solid #225D92;
  }

  .screenGroup .screenBar .screenBarItem {
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    cursor: pointer;
  }

  .screenGroup .screenBar .screenBarItem:hover {
    color: #5CA7FF;
  }

  .screenGroup .screenSelectInfo {
    margin-top: 10px;
    width: 100%;
    height: 200px;
    background: #173A58;
    padding: 10px;
    position: relative;
  }

  .screenSelectInfoIcon {
    position: absolute;
    right: 25px;
    top: -10px;
  }

  .screenGroup .screenSelectInfoStation {
    margin-top: 10px;
    width: 150px;
    min-height: 200px;
    background: #173A58;
    padding: 10px;
    position: relative;
  }

  .screenSelectInfoStationIcon {
    position: absolute;
    left: 70px;
    top: -10px;
  }

  .screenSelectInfoStation .infoDetailRow {
    padding: 5px 0;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }

  .screenSelectInfoStation .infoDetailRowBackfround {
    padding: 5px 0;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }

  .screenSelectInfoStation .infoDetailRow:hover, .screenSelectInfoStation .infoDetailRowBackfround:hover {
    color: #5CA7FF;
    background: #1E4667;
  }

  .screenGroup .screenSelectInfoProduct {
    margin-top: 10px;
    width: 150px;
    min-height: 200px;
    background: #173A58;
    padding: 10px;
    position: relative;
    margin-left: 100px;
  }

  .screenSelectInfoProductIcon {
    position: absolute;
    left: 170px;
    top: -10px;
  }

  .screenSelectInfoProduct .infoDetailRow {
    padding: 5px 0;
    font-size: 14px;
    color: #66b7f2;
    cursor: pointer;
  }

  .screenSelectInfoProduct .infoDetailRowBackfround {
    padding: 5px 0;
    font-size: 14px;
    color: #66b7f2;
    cursor: pointer;
  }

  .screenSelectInfoProduct .infoDetailRow:hover, .screenSelectInfoProduct .infoDetailRowBackfround:hover {
    color: #5CA7FF;
    background: #1E4667;
    cursor: pointer;
  }

  .screenGroup .screenSelectInfoVolume {
    margin-top: 10px;
    width: 150px;
    min-height: 200px;
    background: #173A58;
    padding: 10px;
    position: relative;
    margin-left: 180px;
  }

  .screenSelectInfoVolumeIcon {
    position: absolute;
    left: 170px;
    top: -10px;
  }

  .screenSelectInfoVolume .infoDetailRow {
    padding: 5px 0;
    font-size: 14px;
    color: #66b7f2;
    cursor: pointer;
  }

  .screenSelectInfoVolume .infoDetailRowBackfround {
    padding: 5px 0;
    font-size: 14px;
    color: #66b7f2;
    cursor: pointer;
  }

  .screenSelectInfoVolume .infoDetailRow:hover, .screenSelectInfoVolume .infoDetailRowBackfround:hover {
    color: #5CA7FF;
    background: #1E4667;
    cursor: pointer;
  }

  .screenSelectInfo .selectItem {
    background: #275174;
    border: 1px solid #4A90E2;
    padding: 5px 0;
    color: #4A90E2;
    font-size: 14px;
    text-align: center;
  }

  .screenSelectInfo .unselectItem {
    background: #275174;
    border: 1px solid #275174;
    padding: 5px 0;
    color: #fff;
    font-size: 14px;
    text-align: center;
  }

  .screenSelectInfo .unselectItem .ivu-icon {
    color: #326A92;
  }
</style>
